<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dom节点使用</title>
</head>

<body>
    <div>
        <p>我是本文1</p>
        <p>我是本文2</p>
        <p>我是本文3</p>
    </div>
    <button class="add">创建节点</button>
    <button class="del">删除节点</button>
    <script>
        // 点击创建节点
        document.querySelector('.add').addEventListener('click', function () {
            // 添加节点- 创建 a 标签
            const a = document.createElement('a');
            console.log(a);
            // 设置内容
            a.innerHTML = '百度以下';
            a.href = 'https://www.baidu.com';
            //添加到页面上
            const div = document.querySelector('div')
            // 尾部添加
            // div.append(a);
            // 头部添加
            div.prepend(a);

        })

        // 删除节点
        document.querySelector('.del').addEventListener('click', function () {
            // 删除节点
            const div = document.querySelector('div')
            //  自己删除自己
            // this.remove()
            //删除全部节点
            // div.remove();

            //每隔一秒钟，删掉一个
            document.querySelectorAll('p').forEach((item, index) => {
                setTimeout(() => {
                    item.remove();
                }, (index + 1) * 1000);

            })
        })


    </script>
</body>

</html>